<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>minVue</title>
</head>

<body>
  <div id="app">
    <h2>v-text</h2>
    <P>{{ msg }}</P>
    <p v-text="msg"></p>
    <h2>v-model</h2>
    <input type="text" v-model="msg">
    <p>{{ info.name }}</p>
    <p>{{ myList[0].name }}</p>
    <input type="text" v-model="myList[0].name">
    <div v-html="child"></div>
    <button v-on:click="clickme">click me</button>
  </div>

  <script src="./js/utils.js"></script>
  <script src="./js/dep.js"></script>
  <script src="./js/watcher.js"></script>
  <script src="./js/observer.js"></script>
  <script src="./js/compiler.js"></script>
  <script src="./js/mvvm.js"></script>
  <script>
    let vm = new Mvvm({
      el: "#app",
      data() {
        return {
          msg: "i am merci",
          info: {
            name: "zoey",
            age: 18
          },
          myObj: null,
          myList: [
            {
              name: "apple",
              color: "red"
            },
            {
              name: "orange",
              color: "yellow"
            },
          ],
          child: "<p style='color:red'>你好</p>"
        }
      },
      methods: {
        clickme() {
          alert("clickme");
        }
      }
    })
    vm.myObj = {
      a: "111"
    }
  </script>
</body>

</html>